<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.1.js" ></script>
		<style type="text/css">
        .apple{width:300px; height:200px; border:2px solid blue;}
        .orange{background-color:lightblue;}
        .pear{font-size:30px;}
        </style>
        <script type="text/javascript">
        	function f1(){
        		$('div').addClass('apple');
        		$('div').addClass('orange');
        		$('div').addClass('pear');
        	}
        	function f2(){
        		$('div').removeClass('apple');
        		$('div').removeClass('orange');
        	}
        	function f3(){
            //开关class属性值操作 toggle：开关
            $('div').toggleClass('orange');
        }
        </script>
	</head>
	<body>
		<h1>class属性快捷操作</h1>
        
        <div>this is jquery subject</div>

        <input type="button" value="设置" onclick="f1()" />
        <input type="button" value="删除class的属性值" onclick="f2()" />
        <input type="button" value="开关class属性值操作" onclick="f3()" />
	</body>
</html>
